{% extends 'base.html' %}
{% block title %}电商平台用户行为预测系统{% endblock %}
{% block nav %}欢迎页{% endblock %}

{% block Sidebar %}
    <div class="sidebar" data-color="orange">
        <div class="logo">
            <a href="#" class="simple-text logo-mini">
                <img src="../static/assets/img/taobaologo.png" alt="电商平台logo"/>
            </a>
            <a href="#" class="simple-text logo-normal">
                电商平台用户行为预测系统
            </a>
        </div>
        <div class="sidebar-wrapper">
            <ul class="nav">
                <li>
                    <a href="{{ url_for('ec.index') }}">
                        <i class="now-ui-icons design_app"></i>
                        <p>仪表盘</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.raw_data') }}">
                        <i class="now-ui-icons business_chart-pie-36"></i>
                        <p>原始数据</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.visual2') }}">
                        <i class="now-ui-icons education_atom"></i>
                        <p>预测与推荐</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.visual') }}">
                        <i class="now-ui-icons files_single-copy-04"></i>
                        <p>操作日志</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.user') }}">
                        <i class="now-ui-icons users_single-02"></i>
                        <p>个人中心</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="panel-header panel-header-sm"style="background: linear-gradient(135deg, #F5F5F5 0%, #1c84fc 100%);"></div>
    <div class="content">
        <div class="row">
            <div class="col-md-12">
                <!-- 轮播图区域 -->
                <div id="promoCarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#promoCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#promoCarousel" data-slide-to="1"></li>
                        <li data-target="#promoCarousel" data-slide-to="2"></li>
                    </ol>

                    <div class="carousel-inner rounded-lg shadow-lg">
                        <div class="carousel-item active">
                            <div class="video-container">
                                <video class="d-block w-100" autoplay loop muted>
                                    <source src="../static/assets/videos/promo1.mp4" type="video/mp4">
                                </video>
                                <div class="carousel-caption d-none d-md-block">
                                    <h3 class="display-4">用户行为深度分析</h3>
                                    <p class="lead">洞察用户购买路径，优化电商转化率</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="video-container">
                                <video class="d-block w-100" autoplay loop muted>
                                    <source src="../static/assets/videos/promo2.mp4" type="video/mp4">
                                </video>
                                <div class="carousel-caption d-none d-md-block">
                                    <h3 class="display-4">实时数据可视化</h3>
                                    <p class="lead">多维度展示用户行为数据</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="video-container">
                                <video class="d-block w-100" autoplay loop muted>
                                    <source src="../static/assets/videos/promo3.mp4" type="video/mp4">
                                </video>
                                <div class="carousel-caption d-none d-md-block">
                                    <h3 class="display-4">智能预测推荐</h3>
                                    <p class="lead">基于机器学习提升用户购买率</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <a class="carousel-control-prev" href="#promoCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#promoCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

                <!-- 登录入口 -->
                <div class="login-cta text-center mt-5 p-5 bg-white rounded-lg shadow-sm">
                    <h2 class="mb-4">立即登录体验完整功能</h2>
                    <p class="lead text-muted mb-4">解锁用户行为分析、数据可视化和智能推荐等强大功能</p>
                    <a href="{{ url_for('auth.login') }}" class="btn btn-primary btn-lg mt-3 px-5 py-3 shadow">
                        <i class="now-ui-icons users_circle-08 mr-2"></i>登录/注册
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        // 自动播放视频
        $(document).ready(function () {
            $('.carousel').carousel({
                interval: 5000,
                pause: "hover"
            });

            // 平滑滚动效果
            $('a[href*="#"]').on('click', function(e) {
                e.preventDefault();
                $('html, body').animate(
                    {
                        scrollTop: $($(this).attr('href')).offset().top,
                    },
                    500,
                    'linear'
                );
            });
        });
    </script>
    <style>
        /* 轮播图样式 */
        .carousel {
            max-height: 70vh;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 3rem;
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 比例 */
            height: 0;
            overflow: hidden;
        }

        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .carousel-caption {
            background: rgba(0, 0, 0, 0.6);
            border-radius: 15px;
            bottom: 25%;
            padding: 2rem;
            left: 10%;
            right: 10%;
            animation: fadeIn 1s ease-in-out;
        }

        .carousel-caption h3 {
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            margin-bottom: 1rem;
        }

        .carousel-caption p {
            font-size: 1.25rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        .carousel-indicators li {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin: 0 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* 登录按钮区域 */
        .login-cta {
            margin: 5rem auto;
            padding: 3rem;
            max-width: 800px;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border: 1px solid rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .login-cta:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }

        .login-cta h2 {
            color: #343a40;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }

        .login-cta .btn {
            font-weight: 600;
            letter-spacing: 1px;
            border: none;
            background: linear-gradient(135deg, #f96332 0%, #ff8a5c 100%);
            transition: all 0.3s ease;
        }

        .login-cta .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(249, 99, 50, 0.3);
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .carousel-caption {
                bottom: 15%;
                padding: 1rem;
            }

            .carousel-caption h3 {
                font-size: 1.5rem;
            }

            .carousel-caption p {
                font-size: 1rem;
            }

            .login-cta {
                padding: 2rem 1.5rem;
                margin: 3rem auto;
            }
        }
    </style>
{% endblock %}